<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0" :type="1">
        <div class="kkk">
            <div class="topImgBox">
                <Back class="dtBack" :type="1"/>
                <div class="bgimg">
                    <Image v-if="detail.backgroundUrl" :url="detail.backgroundUrl"/>
                </div>
            </div>
            <div class="artlistIntroduce dtrebg2" v-if="detail.artistId">
                <div class="avater">
                    <Image v-if="detail.headUrl" :url="detail.headUrl"/>
                </div>
                <div class="nickname">{{detail.nick}}</div>
                <div class="rzBox">
                    <div class="rzItem">
                        <i class="iconfont icon-vrenzhengguanli"></i><span>{{detail.authStatus==1?'认证':'未认证'}}艺术家</span>
                    </div>
                    <div class="rzItem">
                        <i class="iconfont icon-shoucang"></i><span>知名艺术家</span>
                    </div>
                    <div class="rzItem">
                        <i class="iconfont icon-jiangbei"></i><span>艺术大家</span>
                    </div>
                </div>
                <div class="introduce">
                    {{detail.introduce}}
                </div>
                <div class="atNumber">
                    <div class="item">
                        <h3>{{detail.worksCount}}</h3>
                        <p>创作</p>
                    </div>
                    <div class="item">
                        <h3>{{detail.fansNumber}}</h3>
                        <p>粉丝</p>
                    </div>
                    <div class="item">
                        <h3>{{detail.followNumber}}</h3>
                        <p>关注</p>
                    </div>
                </div>
                <div class="atBtn">
                    <div class="btnItem">
                        <my-button v-if="detail.attentionStatus==1" class="minBtn" text="关注" @click="addFollow">
                            <i class="iconfont icon-jiahao"></i>
                        </my-button>
                        <my-button v-else-if="detail.attentionStatus==2" class="minBtn" @click="cancelFollow" text="已关注">
                            <i class="iconfont icon-duihao"></i>
                        </my-button>
                    </div>
                </div>
            </div>
            <div class="htitlebox dtrebg">
                <Title text="全部作品"/>
            </div>
        </div>

        <div class="allWorksWrap dtrebg">
            <!-- <div class="tabwrap">
                <my-tab v-model="active" :lists='[{title:"拍卖",name:0},{title:"寄售",name:1}]' :space="true" @change="getData"/>
            </div> -->
            <div class="tabCon">
                <List :lists="page.lists" :type="active"/>
                <empty v-if="page.finished && page.lists.length<1"/>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import myButton from '@/components/myButton.vue';
import Title from '@/components/title.vue'
import myTab from '@/components/myTab.vue'
import List from '@/components/list.vue'
import Back from '@/components/back.vue'
import {toast} from '@/utils/common'
import empty from '@/components/empty.vue'
export default {
    components:{
       mainWrap,
       Image,
       myButton,
       Title,
       myTab,
       List,
       Back,
       empty
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:1,
            detail:{},
            artistId:"",
            page:{
                lists:[],
                pageIndex:1,
                pageSize:4,
                finished: false
            },
            st:''
        })

        onMounted(()=>{
            state.artistId = route.params.id
            getDetail()
            onLoad()
        })

        const getDetail = ()=>{
            store.dispatch("arApi/get_artist_detail", {
                artistId: state.artistId
            }).then(res =>{
                state.detail = res.data
            })
        }

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    let url = 'arApi/artist_auction_list'  // 拍卖作品
                    if(state.active == 1){
                        url = 'arApi/artist_collection_list'// 寄售作品
                    }
                    const res = await store.dispatch(url, {
                        artistId:state.artistId,
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        orderField: "",
                        orderType: "",
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getData = async (active)=>{
            state.active = active
            
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        const addFollow = async ()=>{
            const res = await store.dispatch('arApi/add_follow',{artistId: state.artistId})
            if(res.success){
                state.detail.attentionStatus = 2
                state.detail.fansNumber++
                //toast("关注成功")
            }else{
                toast(res.message)
            }
        }

        const cancelFollow = async ()=>{
            const res = await store.dispatch('arApi/cancel_follow',{artistId: state.artistId})
            if(res.success){
                //toast("取消关注成功")
                state.detail.attentionStatus = 1
                state.detail.fansNumber--
            }else{
                toast(res.message)
            }
        }

        const goBack = ()=>{
            router.back()
        }

        return{
            ...toRefs(state),
            onLoad,
            getData,
            goBack,
            addFollow,
            cancelFollow
        }
    }
}
</script>

<style lang="scss" scoped>
     .topImgBox{
        width: 100%;
        position: relative;
        z-index: 10;
        &::before{
            content: '';
            display: block;
            position: absolute;
            z-index: 8;
            width: 100%;
            left: 0;
            top: 0;
            height: 240px;
            background: url('/images/dttop.png') left top no-repeat;
            background-size:100% 100% ;
        }
        img{
            display: block;
            width: 100%;
        }
        .bgimg{
            width: 100%;
            height: 400px;
            overflow: hidden;
        }
        .back{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 10;
            left: 15px;
            top: 20px;
            width: 36px;
            height: 36px;
            border-radius:50% ;
            img{
                display: block;
                width: 100%;
                height: 100%;
                &:hover{
                    opacity: 0.5;
                }
            }
        }
        
    }
    .artlistIntroduce{
        background: #0E6161;
        padding: 0 40px;
        .avater{
            position: absolute;
            z-index: 12;
            left: 50%;
            top: -85px;
            margin: 0 0 0 -85px;
            width: 170px;
            height: 170px;
            overflow: hidden;
            border-radius:50% ;
        }
        .nickname{
            font-size: 42px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            text-align: center;
            padding: 114px 0 0 0;
            font-weight: normal;
        }
        .rzBox{
            display: flex;
            justify-content: center;
            padding: 20px 0 0 0;
            .rzItem{
                display: flex;
                height: 46px;
                line-height: 46px;
                padding: 0 15px;
                border-radius: 12px;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                border: 1px solid var(--baseColor);
                &+.rzItem{
                    margin-left: 20px;
                }
                img{
                    width: 24px;
                    height: 24px;
                    margin: 0 4px 0 0;
                }
                i{
                    font-size: 32px;
                    color: var(--baseColor);
                    margin: 0 6px 0 0;
                }
                span{
                    display: block;
                    transform: scale(0.98);
                    -webkit-transform: scale(0.98);
                }
            }
        }
        .introduce{
            font-size: 28px;
            line-height: 46px;
            padding: 36px 0;
        }
        .atNumber{
            display: flex;
            height: 110px;
            
            .item{
                flex: 1;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                &+.item{
                    border-left: 1px solid rgba(255, 255, 255, 0.2);;
                }
                h3{
                    font-size: 42px;
                    font-weight: 400;
                }
                p{
                    font-size: 28px;
                    color: #86B0B0;
                }
            }
        }
        .atBtn{
            padding: 40px 0 54px 0;
            display: flex;
            justify-content: center;
            .btnItem{
                .myBtn{
                    display: inline;
                    padding: 0 25px;
                }
            }
        }
        
    }
    .allWorksWrap{
        padding: 40px;
        padding-top:0 ;
        .tabwrap{
            padding: 38px 0 0 0;
        }
        .tabCon{
            padding-top: 20px;
        }
    }
    .htitlebox{
        padding: 40px 40px 0 40px;
    }
    
    
</style>